<template>
  <div class="login-container">
    <div class="login-content-container">
      <div class="title-container">
        <div class="img"><img src="../../assets/images/logo.png" width="100%" height="100%" alt=""></div>
        <p class="title">어드민 시스템</p>
      </div>
      <div class="login-form-wrap">
        <el-tabs v-model="activeName" class="login-form-auth" @tab-click="handleClick">
          <el-tab-pane label="관리자" name="관리자"></el-tab-pane>
          <el-tab-pane label="코치" name="코치"></el-tab-pane>
        </el-tabs>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form-container" label-width="0" autocomplete="on">
          <el-form-item prop="username" label="">
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="아이디"
              name="username"
              type="text"
              tabindex="1"
              prefix-icon="el-icon-user"
              autocomplete="on"
            />
          </el-form-item>
          <el-form-item prop="password" label="">
            <el-input
              ref="password"
              v-model="loginForm.password"
              type="password"
              placeholder="비밀번호"
              name="password"
              prefix-icon="el-icon-lock"
              tabindex="2"
              autocomplete="on"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <!-- <el-form-item prop="" class="login_etc">
            <el-checkbox v-model="checked">로그인 유지</el-checkbox>
            <el-link href="" target="_blank" style="float:right">아이디/비번찾기</el-link>
          </el-form-item> -->
          <!-- <el-form-item prop="captcha" label="인증번호">
            <el-input
              ref="captcha"
              v-model="loginForm.captcha"
              placeholder="인증번호를 입력하십시오"
              name="captcha"
              type="text"
              tabindex="1"
              autocomplete="on"
              class="code-image"
            >
              <template slot="append">
                <img @click="changeCode" v-show="codeUrl" style="width:80px;height:38px;display:block;cursor: pointer;" :src="codeUrl" alt="새로 고침">
              </template>
            </el-input>
          </el-form-item> -->
          <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">로그인</el-button>
        </el-form>
      </div>
    </div>
    <div class="login-footer">
      <div class="footer-copyright">
        Copyright <span role="img" aria-label="copyright" class="anticon anticon-copyright"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="copyright" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm5.6-532.7c53 0 89 33.8 93 83.4.3 4.2 3.8 7.4 8 7.4h56.7c2.6 0 4.7-2.1 4.7-4.7 0-86.7-68.4-147.4-162.7-147.4C407.4 290 344 364.2 344 486.8v52.3C344 660.8 407.4 734 517.3 734c94 0 162.7-58.8 162.7-141.4 0-2.6-2.1-4.7-4.7-4.7h-56.8c-4.2 0-7.6 3.2-8 7.3-4.2 46.1-40.1 77.8-93 77.8-65.3 0-102.1-47.9-102.1-133.6v-52.6c.1-87 37-135.5 102.2-135.5z"></path></svg></span> 2020 Workwiz
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    const validateUsername = (rule, value, callback) => {
      if (value.trim().length === 0) {
        callback(new Error('아이디를 입력하세요'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('패스워드를 입력하세요'))
      } else {
        callback()
      }
    }
    // const validateCode = (rule, value, callback) => {
    //   if (value.trim().length === 0) {
    //     callback(new Error('인증번호를 입력하십시오'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      activeName: '관리자',
      checked: false,
      loginForm: {
        username: '',
        password: '',
        captcha: '',
        captchaKey: ''
      },
      codeUrl: '',
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
        // captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
      },
      loading: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  mounted () {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  methods: {
    handleClick (key, path) {
      console.log(key, path)
    },
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
            })
            .finally(() => { this.loading = false })
        } else {
          return false
        }
      })
    },
    getOtherQuery (query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>
